<style>

    .ly-result {
        background: #fff;
        width: 72%;
        margin: 0 auto;
        text-align: center;
    }

    .ly-result-icon {
        font-size: 80px;
    }

    .ly-result-icon .el-icon-success{
        color: #27CC6A;
    }
    .ly-result-icon .el-icon-error{
        color: #FE707D;
    }

    .ly-result-icon .el-icon-warning{
        color: #F7BA2A;
    }

    .ly-result-icon .ivu-icon {
        color: #fff;
        font-size: 72px;
        border-radius: 50%;
    }

    .ivu-icon {
        display: inline-block;
        font-family: Ionicons;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        text-rendering: optimizeLegibility;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: -.125em;
        text-align: center;
    }

    .ly-result-title {
        margin-bottom: 16px;
        color: #17233d;
        font-weight: 600;
        font-size: 24px;
        line-height: 32px;
    }

    .ly-result-desc {
        margin-bottom: 24px;
        color: #808695;
        font-size: 14px;
        line-height: 22px;
    }

    .ly-result-actions {
        margin-top: 32px;
    }


</style>
<template>
    <div class="ly-result">
        <div class="ly-result-icon ">
            <i :class="['el-icon-'+type]" ></i>
        </div>
        <div v-show="title" class="ly-result-title">{{title}}</div>
        <div v-show="description" class="ly-result-desc">
            <div>
               {{description}}
            </div>
        </div>

        <ly-tip v-show="showContent">
            <slot name="content"></slot>
        </ly-tip>
        <div class="ly-result-actions">
            <slot name="actions"></slot>

        </div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-result',
            props: {
                type:{
                    'default':'success'
                },
                title:{
                    'default':''
                },
                description:{
                    'default':''
                }

            },data:function () {
              return {showContent:false}
            },mounted: function () {
                this.showContent=this.$scopedSlots.content!=null;
            }
        }
    });
</script>
